<template>
  <div class="user-info">
    <a-descriptions bordered :column="1">
      <a-descriptions-item label="用户名">
        <a-input v-model="userInput.userName" :disabled="true"></a-input>
      </a-descriptions-item>
      <a-descriptions-item label="昵称">
        <a-input v-model="userInput.nickName" :disabled="!isEditing"></a-input>
      </a-descriptions-item>
      <a-descriptions-item label="邮箱">
        <a-input v-model="userInput.email" :disabled="!isEditing"></a-input>
      </a-descriptions-item>
      <a-descriptions-item label="手机号">
        <a-input
          v-model="userInput.phoneNumber"
          :disabled="!isEditing"
        ></a-input>
      </a-descriptions-item>
      <a-descriptions-item label="密码">
        <a-popconfirm @confirm="resetPassword">
          <a-icon slot="icon" type="lock"></a-icon>
          <a-input
            slot="title"
            v-model="password"
            size="small"
            placeholder="新密码"
          ></a-input>
          <a-button type="default" size="small">修改密码</a-button>
        </a-popconfirm>
      </a-descriptions-item>
    </a-descriptions>
    <div v-if="!isEditing" class="foot-btn">
      <a-button type="primary" @click="isEditing = true">修改</a-button>
    </div>
    <div v-else class="foot-btn">
      <a-button type="primary" @click="userInfoChange">保存</a-button>
      <a-button type="default" @click="userInfoChangeCancel">取消</a-button>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 用户资料
      userInput: {
        userName: '',
        nickName: '',
        email: '',
        phoneNumber: ''
      },
      //   是否正在编辑
      isEditing: false,
      password: ''
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    userInfoChange() {
      this.$api.user.changeUserInfo(this.userInput).then((res) => {
        this.$message.success('修改成功')
        this.$store.dispatch('setUserInfoAsync')
        this.isEditing = false
      })
    },
    userInfoChangeCancel() {
      this.isEditing = false
      this.userInput = { ...this.userInfo }
    },
    resetPassword() {
      if (this.password.trim() === '') {
        this.$message.info('密码不能为空')
      } else {
        this.$api.user.changePassword(this.password).then((res) => {
          console.log(res)
        })
      }
    }
  },
  mounted() {
    this.userInput = { ...this.userInfo }
  }
}
</script>
<style lang="less" scoped>
.user-info {
  height: 100%;
  position: relative;
  overflow: auto;
  .foot-btn {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: right;
    .ant-btn {
      margin-left: 24px;
    }
  }
}
</style>
